<template>
  <div>
    <form class="login-box" v-show="!is_login">
      <p class="text-muted login-box-item">请输入用户名和密码登录</p>
      <input type="text" v-model="username" class="login-box-item form-control" placeholder="用户名">
      <input type="password" v-model="password" class="login-box-item form-control" placeholder="密码">
      <button class="login-box-btn btn btn-default" @click="login">登录</button>
    </form>
    <div class="my-card" v-show="is_login">
      <el-card :body-style="{ padding: '0px' }">
        <img style="height: 300px" alt="歌曲" src="../assets/jump_to_music.jpeg" class="image">
        <div style="padding: 14px;">
          <span>一些喜欢的歌曲</span>
          <div class="bottom clearfix login-box-item">
            <el-button :plain="true" style="float: right" @click="jumpToMusic" type="primary" class="button">去听歌
            </el-button>
          </div>
        </div>
      </el-card>
    </div>
    <div class="my-card" v-show="is_login">
      <el-card :body-style="{ padding: '0px' }">
        <img style="height: 300px" alt="书籍" src="../assets/jump_to_book.jpeg" class="image">
        <div style="padding: 14px;">
          <span>一些喜欢的小说</span>
          <div class="bottom clearfix login-box-item">
            <el-button :plain="true" style="float: right" @click="jumpToBook" type="primary" class="button">去阅读
            </el-button>
          </div>
        </div>
      </el-card>
    </div>

  </div>

</template>

<script>
import 'bootstrap/dist/css/bootstrap.min.css'
import UrlConfig from '../utils/api'

export default {
  name: 'ProjectIndex',
  data () {
    return {
      is_login: false,
      username: '',
      password: ''
    }
  },
  methods: {
    jumpToMusic () {
      this.$router.push({
        path: '/p_music/content'
      })
    },
    jumpToBook () {
      this.$router.push({
        path: '/p_book/'
      })
    },
    login () {
      const context = this
      this.$fetch(UrlConfig.user_login, {
        user_name: context.username,
        pass_word: context.password
      })
        .then((res) => {
          context.is_login = res.data.status === 0
          let token = res.data.data.token
          localStorage.setItem('token', token)
          context.notify_message('成功登录')
        })
        .catch(function () {
          context.notify_message('登录失败')
        })
    },
    notify_message (msg) {
      this.$message(msg)
    }
  },
  mounted: function () {
    this.is_login = localStorage.getItem('token') != null && localStorage.getItem('token') !== ''
  }

}
</script>

<style scoped>

  .my-card {
    padding: 3px;
    margin-top: 100px;
    width: 50%;
    height: 100px;
    float: left;
  }

  .login-box {
    left: 0;
    right: 0;
    position: relative;
    padding-top: 100px;
    margin: 0 auto;
    width: 60%;
  }

  .login-box-item {
    margin-top: 20px;
  }

  .login-box-btn {
    color: white;
    width: 90%;
    background: lightpink;
    margin-top: 60px;
  }
</style>
